<template>
  <div class="quick-start">
    <div class="header">
      <h3>快捷入口</h3>
      <a-icon
        :type="isDeleteMode ? 'close' : 'delete'"
        @click="toggleDeleteMode"
        class="toggle-icon"
      />
    </div>
    <div class="cards-container">
      <a-card
        v-for="(card, index) in shortcuts"
        :key="card.id"
        class="shortcut-card"
        :style="{ backgroundColor: card.backgroundColor }"
        @click="handleCardClick(card)"
      >
        <div class="card-content">
          <span class="card-title">{{ card.name }}</span>
          <img :src="card.backgroundImage" class="card-image" alt="icon" />
          <a-icon
            type="minus-circle"
            v-if="isDeleteMode"
            class="remove-icon"
            @click.stop="removeShortcut(index)"
          />
        </div>
      </a-card>
      <a-card class="add-card" @click="addShortcut">
        <a-icon type="plus" />
      </a-card>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import bg1 from '@/views/dashboard/assets/bg1.png'
import bg2 from '@/views/dashboard/assets/bg2.png'
import { useRouter } from 'vue-router';
export default {
  name: 'QuickStart',
  setup() {
    const router = useRouter();
    const shortcuts = ref([
      {
        id: uuidv4(),
        name: '随机点名',
        backgroundColor: '#FFB6C1',
        backgroundImage: bg1,
        link:'/thestart'
      },
      {
        id: uuidv4(),
        name: '学生名单',
        backgroundColor: '#87CEFA',
        backgroundImage: bg2,
        link:'/classlist'
      }
    ])

    const isDeleteMode = ref(false)

    const toggleDeleteMode = () => {
      isDeleteMode.value = !isDeleteMode.value
    }

    const removeShortcut = (index) => {
      shortcuts.value.splice(index, 1)
    }

    const addShortcut = () => {
      const newShortcut = {
        id: uuidv4(),
        name: '新快捷方式',
        backgroundColor: '#D3D3D3',
        backgroundImage: ''
      }
      shortcuts.value.push(newShortcut)
    }

    const handleCardClick = (card) => {
      console.log('点击了快捷方式:',card.link)
      router.push(card.link);
    }

    return {
      shortcuts,
      isDeleteMode,
      toggleDeleteMode,
      removeShortcut,
      addShortcut,
      handleCardClick
    }
  }
}
</script>

<style scoped lang="less">
.quick-start {
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 10px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    h3 {
      margin: 0;
      color: #333;
    }

    .toggle-icon {
      font-size: 20px;
      cursor: pointer;
      color: #333;
    }
  }

  .cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  .shortcut-card {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.05);
    }

    .card-content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .card-title {
        color: #fff;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
      }

      .card-image {
        width: 40px;
        height: 40px;
      }

      .remove-icon {
        position: absolute;
        top: 5px;
        right: 5px;
        color: red;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }

  .add-card {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #e0e0e0;
    }

    .anticon {
      font-size: 24px;
      color: #999;
    }
  }
}
</style>
